<template>
  <view class="container">
    <view class="title">注册账号</view>
    <view class="form">
      <view class="form-group">
        <label class="form-label">手机号</label>
        <input type="text" class="form-input" placeholder="请输入手机号" v-model="phone" />
      </view>
      
      <view class="form-group">
        <label class="form-label">验证码</label>
        <view class="code-input-group">
          <input type="text" class="form-input code-input" placeholder="请输入验证码" v-model="code" />
          <button class="code-button" @click="getCode">获取验证码</button>
        </view>
      </view>
      
      <view class="form-group">
        <label class="form-label">设置密码</label>
        <input type="password" class="form-input" placeholder="请设置密码" v-model="password" />
      </view>
      
      <view class="form-group">
        <label class="form-label">确认密码</label>
        <input type="password" class="form-input" placeholder="请再次输入密码" v-model="confirmPassword" />
      </view>
      
      <button class="register-button" @click="register">注册</button>
      
      <view class="login-link">
        已有账号? <navigator url="/pages/login/index" open-type="redirect">返回登录</navigator>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'RegisterPage',
  setup() {
    const phone = ref('');
    const code = ref('');
    const password = ref('');
    const confirmPassword = ref('');

    const getCode = () => {
      if (!phone.value) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
        return;
      }
      
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      });
    };

    const register = () => {
      if (!phone.value || !code.value || !password.value || !confirmPassword.value) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      
      if (password.value !== confirmPassword.value) {
        uni.showToast({
          title: '两次密码输入不一致',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({ title: '注册中...' });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        });
        
        setTimeout(() => {
          uni.redirectTo({ url: '/pages/login/index' });
        }, 1500);
      }, 2000);
    };

    return {
      phone,
      code,
      password,
      confirmPassword,
      getCode,
      register
    };
  }
});
</script>

<style>
:root {
  --primary-color: #2196F3;
}

.container {
  padding: 30px 24px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
}

.form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

.form-input {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 16px;
  transition: border 0.3s;
  outline: none;
}

.form-input:focus {
  border-color: var(--primary-color);
}

.code-input-group {
  display: flex;
  gap: 10px;
}

.code-input {
  flex: 1;
}

.code-button {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 0 15px;
  border-radius: 12px;
  font-size: 14px;
  white-space: nowrap;
}

.register-button {
  background-color: #2196F3;
  color: white;
  border: none;
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 20px;
}

.login-link {
  text-align: center;
  font-size: 14px;
  color: #666;
}

.login-link navigator {
  color: #2196F3;
  font-weight: 600;
  text-decoration: none;
}
</style> 